<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{/layout/_easyui_Content}" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:hhm="http://www.w3.org/1999/xhtml">
<head>
    <title>[[${tableTitle}]]列表</title>
</head>
<body>
<scction layout:fragment="Head">

</scction>

<section layout:fragment="content">
    <div th:title="${tableTitle} + '栏目'" data-options="region:'west',split:true,collapsed:false"
         style="width: 180px;">
        <ul id="tree"></ul>
    </div>
    <div data-options="region:'center'">
        <div id="grid-list" th:title="${tableTitle} + '栏目类别'" data-options="toolbar:'#tb',border:false"></div>
    </div>
</section>

<section layout:fragment="Toolbar">
    <div id="tb" class="tb" style="height:auto;">
        <div id="tabs" class="easyui-tabs menu-tabs" data-options="border:false">
            <div title="全部" id="9999"></div>
            <div th:each="item,itemStat:${T(com.kevis.webCommon.tools.ui.SelectItem).GetSelectListItem(T(com.kevis.webCommon.tools.ui.Dictionary).IsStatus,null,null)}"
                 th:title="${item.getText()}" th:id="${item.getValue()}"></div>
        </div>
        <div class="toolbar">
            <div class="search">
                <input type="hidden" name="SearchParentID" id="SearchParentID" th:value="${MvcClassID}"/>
                <input type="hidden" name="SearchMarkStatus" id="SearchMarkStatus" value="9999"/>
                <input type="hidden" name="SearchKey" id="SearchKey" value=""/>
                <input type="hidden" name="SearchName" id="SearchName" value=""/>
                <input class="easyui-searchbox" data-options="prompt:'查询关键字',searcher:doSearch,menu:'#mm'"
                       id="SearchBox" style="width:300px"/>
                <div id="mm">
                    <div data-options="name:'F_Title'">标题</div>
                    <div data-options="name:'ID'">编号</div>
                    <div data-options="name:'F_Letter'">简拼</div>
                    <div data-options="name:'F_ParentLevels'">级别</div>
                </div>
            </div>
            <div class="button">
                <ul>
                    <!--                    <li><a href="javascript:void(0);" class="easyui-linkbutton"-->
                    <!--                           data-options="iconCls:'icon-insert',plain:false"-->
                    <!--                           onclick="Class_Insert('998e7860-0001-0010-0020-010000000110');">添加</a></li>-->
                    <li>
                        <hhm:roleAction th:attr="actionGuid=${ActionGUID}" actionName="add"></hhm:roleAction>
                    </li>
<!--                    <li>-->
<!--                        <hhm:roleAction th:attr="actionGuid=${ActionGUID}" actionName="edit"></hhm:roleAction>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <hhm:roleAction th:attr="actionGuid=${ActionGUID}"-->
<!--                                        actionName="Gen_News_Class_Files"></hhm:roleAction>-->
<!--                    </li>-->
                </ul>
            </div>
        </div>
    </div>
    <div id="form-window" title="编辑/添加" class="easyui-window" data-options="modal:true,closed:true"
         style="width:98%; height:98%;"></div>
</section>

<scction layout:fragment="JavaScript">
    <script type="text/javascript">
        let listUrl = '[(${@htmlHelper.actionGuid("list")})]';
        let addUrl = '[(${@htmlHelper.actionGuid("add")})]';
        let editUrl = '[(${@htmlHelper.actionGuid("edit")})]';
        let actionEnableUrl = '[(${@htmlHelper.actionGuid("enable")})]';
        let leftTreeUrl = '[(${@htmlHelper.actionGuid("tree")})]';
    </script>
    <script type="text/javascript" th:inline="none">
        let frozenColumns=[[
            {field: 'ck', checkbox: true, width: 40}
        ]];
        let columns = [[
            {field: 'id', title: 'Id', width: 60, align: 'center', sortable: true}
            , {field: 'title', title: '标题', width: 60, align: 'center', sortable: true}
            , {field: 'classLevel', title: '级别', width: 60, align: 'center', sortable: true}
            , {field: 'sort', title: '排序', width: 60, align: 'center', sortable: true}
            , {field: 'status', title: '状态', width: 60, align: 'center', sortable: true}
            , {field: 'createTime', title: '创建时间', width: 120, align: 'center', sortable: true}
        ]];
    </script>
    <script th:inline="javascript">
        //let MODULE_PATH = contextPath + "/article/class/";

        $(function () {
            // 初始化-标签页
            let tabs = $('#tabs').tabs({
                onSelect: function (title, index) {
                    $("#SearchMarkStatus").val(tabs.tabs('getSelected').panel('options').id);
                    btnSearch();
                }
            });

            // 初始化-分类树
           var tree1 = $('#tree').tree({
                checkbox: false,
                method: 'get',
                //dataType: 'json',
                //async:false,//默认就是异步,设置不了同步
                //url: contextPath + '/' + TableName + '/GetTreeAjax?TableName=' + TableName + "&parentId=" + MvcClassID + "&isRoot=true&IsAllStatus=false",
                //url: MODULE_PATH + 'selectParent',
                url: ctreatLeftTreeLink(createLink(leftTreeUrl), TableName),
                //queryParams: {parentId: 0},
                onClick: function (node) {
                    clickTree(node.id);
                },
                formatter: function (node) {
                    let s = '<span title=\'' + node.id + '\'> ' + node.text + '</span>';
                    if (node.count > 0) {
                        s += '&nbsp;(<span style=\'color:blue\'>' + node.count + '</span>)';
                    }
                    return s;
                }
            });

            // 初始化 - 列表
            loadData(queryParams());


        });


        function loadData(params) {
            grid = $('#grid-list').datagrid({
                width: function () {
                    return document.body.clientWidth * 0.9
                },
                loadMsg: "数据加载中，请稍候……",
                //url: MODULE_PATH + 'main',
                url: createLink(listUrl),
                //url:createLink('729f225f-3b52-11ee-9e9e-d481d75ec065'),
                striped: true,//显示斑马线效果
                pagination: true, //分页控件
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                pagePosition: 'bottom',//分页工具栏的位置
                rownumbers: true, //行号
                fit: true, //自动大小
                checkOnSelect: true,//选中复选框关联
                singleSelect: false,//只能选中一行
                showFooter: true,
                queryParams: params,
                idField: 'Id',//设置主键列
                //冻结列
                frozenColumns: frozenColumns,
                //滚动列
                columns: columns
                , onLoadSuccess: function (data) {
                    setTimeout(function () {

                        // grid.datagrid('fixDetailRowHeight');
                        // grid.datagrid("clearSelections");
                        // bindFancybox();
                    }, 0);
                },
                //双击操作
                onDblClickRow: function (rowIndex, rowData) {
                    var rowid = rowData.id;
                    //update(rowid);
                    [(${@htmlHelper.linkJavaScript("edit")})]
                },
                //失败操作
                onLoadError: function () {
                    // msgShow("操作失败", "发生错误,获取列表失败！", "error");
                }
            });

            // 分页样式
            grid.datagrid('getPager').pagination({
                showPageList: true,
                showRefresh: true,
                beforePageText: "第",
                afterPageText: "页 ，共 <span class=\"red\">{pages}</span> 页",
                displayMsg: '当前 <span class=\"red\">{from}</span> 到 <span class=\"red\">{to}</span> 条，总 <span class=\"red\">{total}</span> 条，耗时 P <span class=\"red\">)</span>，D <span class=\"red\" id=\"timeOut\"></span> (<span class=\"red\" id=\"timeOut_db\"></span> <span class=\"red\" id=\"timeOut_sw\"></span> <span class=\"red\" id=\"timeOut_web\"></span>)'
            });
            $('body').layout();
        }

        //参数
        function queryParams() {
            let queryParams1 = {
                SearchParentID: $("#SearchParentID").val(),
                SearchMarkStatus: $("#SearchMarkStatus").val(),
                SearchName: $('#SearchBox').searchbox('getName'),
                SearchKey: $('#SearchBox').searchbox('getValue')
            };
            return queryParams1;
        }

        // 搜索
        function doSearch(value, name) {
            btnSearch();
            var nodes = $('#tree').tree('find', 4);
            $('#tree').tree('expandTo', nodes.target);
        }

        function btnSearch() {
            grid.datagrid('load', queryParams());
        }

        // 菜单树触发
        function clickTree(nodeid) {
            $("#SearchParentID").val(nodeid);
            btnSearch();
        }

        //刷新列表
        function refreshGrid() {
            refreshGridClose(0);
        }

        function refreshGridClose(parentId) {
            grid.treegrid('clearSelections');
            closeWin();
            btnSearch();
            $('#tree').tree('reload',parentId);
        }

        // function Class_Insert() {
        //     //获取当前页面的高度
        //     let height = $(document.body).height();
        //     //获取当前页面的宽度
        //     let width = $(document.body).width();
        //     layer.open({
        //         type: 2,
        //         title: '新增',
        //         shade: 0.1,
        //         //area:['450px','500px'],
        //         //area:['100%', '100%'],
        //         //area:['auto'],
        //         //area:[Number(width/2)+"px",Number(height*0.9)+"px"],
        //         //area: screen() < 2 ? ['90%', '80%'] : ['1280px', '720px'],
        //         area: screen() < 2 ? ['90%', '80%'] : ['450px', '500px'],
        //         content: MODULE_PATH + 'add'
        //     });
        // }

        //分类 添加
        function add(id) {
            dialogWin = openWindow("#form-window", " 添加", createLink(addUrl), "icon-add").dialog('open');
        }

        function edit(actionid,id) {
            dialogWin = openWindow("#form-window", " 编辑", createLink(actionid)+'&id='+id, "icon-add").dialog('open');
        }

        //判断浏览器大小方法
        // function screen() {
        //     //获取当前窗口的宽度
        //     var width = $(window).width();
        //     if (width > 1200) {
        //         return 3;   //大屏幕
        //     } else if (width > 992) {
        //         return 2;   //中屏幕
        //     } else if (width > 768) {
        //         return 1;   //小屏幕
        //     } else {
        //         return 0;   //超小屏幕
        //     }
        // }
    </script>
</scction>

</body>
</html>